<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <!-- <link rel="stylesheet" href="./normalize.css" /> -->
        <link rel="stylesheet" href="./ASSETS/font icons/fonts.css" />
        <link rel="stylesheet" href="./index.css" />
        <title>tw-ci-web-staic-demo</title>
    </head>
    <body>
        <div class="main">
            <div class="header">
                <div class="header-logo">
                    <img src="./ASSETS/logo/logo.svg" alt="logo-pic" />
                </div>
                <div class="header-user">
                    <img src="./ASSETS/logo/avatar.jpg" alt="user-info" />
                    <i
                        class="userInfo icon-angle-down"
                        onclick="showUserInfo(event)"
                    ></i>
                    <ul class="user-info-list">
                        <li class="user-info-ltem">
                            <i class="icon-id-card"></i>Profile
                        </li>
                        <li class="user-info-ltem">
                            <i class="icon-sign-in"></i>Sign Out
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content">
                <div class="inner-content">
                    <div class="router-tree">
                        <ul class="router-list">
                            <li class="router-item">
                                <i class="icon-dashboard"></i>DASHBOARD
                            </li>
                            <li class="router-item">
                                <i class="icon-sitemap"></i>AGENT
                            </li>
                            <li class="router-item">
                                <i class="icon-boat"></i>MY CRUISE
                            </li>
                            <li class="router-item">
                                <i class="icon-life-bouy"></i>HELP
                            </li>
                        </ul>
                        <div class="history">
                            <div class="history-title">History</div>
                            <ul class="history-list">
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                                <li class="history-item">
                                    <span
                                        >basdasdjsdskdadjasldjsksdasdsadad</span
                                    >
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-content">
                        <div class="card-info">
                            <div class="building">
                                <div class="status">building</div>
                                <div class="number">3</div>
                                <i class="icon-cog"></i>
                            </div>
                            <div class="idle">
                                <div class="status">idle</div>
                                <div class="number">5</div>
                                <i class="icon-coffee"></i>
                            </div>
                            <div class="summary">
                                <ul>
                                    <li>
                                        <div>All</div>
                                        <span>8</span>
                                    </li>
                                    <li>
                                        <div>PHYSICAL</div>
                                        <span>4</span>
                                    </li>
                                    <li>
                                        <div>VIRTUAL</div>
                                        <span>4</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="filter-tools">
                            <span class="type-button actived">All</span>
                            <span class="type-button">Physical</span>
                            <span class="type-button">Virtual</span>
                            <div class="search-tools">
                                <i class="icon-search"></i>
                                <input type="text" class="search-input" />
                            </div>
                            <i class="icon-th-card"></i>
                            <i class="icon-th-list activedIcon"></i>
                        </div>
                        <div class="task-detail">
                            <div class="os-icon">
                                <img
                                    src="./ASSETS/os icons/windows.png"
                                    alt="windows"
                                />
                            </div>
                            <div class="agent-info">
                                <div class="server-tags">
                                    <span class="server-name">
                                        <i class="icon-desktop"></i>
                                        <span
                                            >bjstdmngbdr08.thoughtworks.com</span
                                        >
                                    </span>
                                    <span class="badges-status idle">idle</span>
                                    <span class="server-ip">
                                        <i class="icon-info"></i>
                                        <span>192.168.1.80</span>
                                    </span>
                                    <span class="server-folder">
                                        <i class="icon-folder"></i>
                                        <span>/var/lib/cruise-agent</span>
                                    </span>
                                </div>
                                <div class="res-tags">
                                    <i class="icon-plus" onclick="openDialog({id:1})"></i>
                                    <span
                                        >Chrome
                                        <i
                                            class="icon-trash"
                                            onclick="deleteRes({id: 1, res: 'Chrome'})"
                                        ></i
                                    ></span>
                                    <span
                                        >Firefox <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Safari <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Ubuntu <i class="icon-trash"></i
                                    ></span>
                                    <div class="dialog dialog1">
                                        <i class="icon-close" onclick="closeDialog({id:1})"></i>
                                        <div class="dialog-title">Separate multiply resource name with commas</div>
                                        <input type="text" placeholder="  Input value" class="res-input res1">
                                        <div class="btn-group">
                                            <span class="btn-add" onclick="addRes({id:1})">Add Resources</span>
                                            <span class="btn-cancel" onclick="closeDialog({id:1})">Cancel</span>
                                        </div>
                                        <div class="triangle"></div>
                                    </div>
                                    <div class="mask mask1" onclick="closeDialog({id:1})"></div>
                                </div>
                            </div>
                        </div>
                        <div class="task-detail">
                            <div class="os-icon">
                                <img
                                    src="./ASSETS/os icons/ubuntu.png"
                                    alt="ubuntu"
                                />
                            </div>
                            <div class="agent-info">
                                <div class="server-tags">
                                    <span class="server-name">
                                        <i class="icon-desktop"></i>
                                        <span
                                            >bjstdmngbdr08.thoughtworks.com</span
                                        >
                                    </span>
                                    <span class="badges-status building"
                                        >building</span
                                    >
                                    <span class="server-ip">
                                        <i class="icon-info"></i>
                                        <span>192.168.1.80</span>
                                    </span>
                                    <span class="server-folder">
                                        <i class="icon-folder"></i>
                                        <span>/var/lib/cruise-agent</span>
                                    </span>
                                </div>
                                <div class="res-tags">
                                    <i class="icon-plus"></i>
                                    <span
                                        >Chrome <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Firefox <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Safari <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Ubuntu <i class="icon-trash"></i
                                    ></span>
                                    <div class="build-deny">
                                        <i class="icon-deny"></i>
                                        <label class="text-deny">Deny</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="task-detail">
                            <div class="os-icon">
                                <img
                                    src="./ASSETS/os icons/centos.png"
                                    alt="cent_os"
                                />
                            </div>
                            <div class="agent-info">
                                <div class="server-tags">
                                    <span class="server-name">
                                        <i class="icon-desktop"></i>
                                        <span
                                            >bjstdmngbdr08.thoughtworks.com</span
                                        >
                                    </span>
                                    <span class="badges-status idle">idle</span>
                                    <span class="server-ip">
                                        <i class="icon-info"></i>
                                        <span>192.168.1.80</span>
                                    </span>
                                    <span class="server-folder">
                                        <i class="icon-folder"></i>
                                        <span>/var/lib/cruise-agent</span>
                                    </span>
                                </div>
                                <div class="res-tags">
                                    <i class="icon-plus"></i>
                                    <span
                                        >Chrome <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Firefox <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Safari <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Ubuntu <i class="icon-trash"></i
                                    ></span>
                                </div>
                            </div>
                        </div>
                        <div class="task-detail">
                            <div class="os-icon">
                                <img
                                    src="./ASSETS/os icons/debian.png"
                                    alt="debin"
                                />
                            </div>
                            <div class="agent-info">
                                <div class="server-tags">
                                    <span class="server-name">
                                        <i class="icon-desktop"></i>
                                        <span
                                            >bjstdmngbdr08.thoughtworks.com</span
                                        >
                                    </span>
                                    <span class="badges-status building"
                                        >building</span
                                    >
                                    <span class="server-ip">
                                        <i class="icon-info"></i>
                                        <span>192.168.1.80</span>
                                    </span>
                                    <span class="server-folder">
                                        <i class="icon-folder"></i>
                                        <span>/var/lib/cruise-agent</span>
                                    </span>
                                </div>
                                <div class="res-tags">
                                    <i class="icon-plus"></i>
                                    <span
                                        >Chrome <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Firefox <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Safari <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Ubuntu <i class="icon-trash"></i
                                    ></span>
                                    <div class="build-deny">
                                        <i class="icon-deny"></i>
                                        <label class="text-deny">Deny</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="task-detail">
                            <div class="os-icon">
                                <img
                                    src="./ASSETS/os icons/suse.png"
                                    alt="suse"
                                />
                            </div>
                            <div class="agent-info">
                                <div class="server-tags">
                                    <span class="server-name">
                                        <i class="icon-desktop"></i>
                                        <span
                                            >bjstdmngbdr08.thoughtworks.com</span
                                        >
                                    </span>
                                    <span class="badges-status building"
                                        >building</span
                                    >
                                    <span class="server-ip">
                                        <i class="icon-info"></i>
                                        <span>192.168.1.80</span>
                                    </span>
                                    <span class="server-folder">
                                        <i class="icon-folder"></i>
                                        <span>/var/lib/cruise-agent</span>
                                    </span>
                                </div>
                                <div class="res-tags">
                                    <i
                                        class="icon-plus"
                                        onclick="openDialog({id: 3})"
                                    ></i>
                                    <span
                                        >Chrome <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Firefox <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Safari <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Ubuntu <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Chrome <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Firefox <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Safari <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Ubuntu <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Chrome <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Firefox <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Safari <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Ubuntu <i class="icon-trash"></i
                                    ></span>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="task-detail">
                            <div class="os-icon">
                                <img
                                    src="./ASSETS/os icons/debian.png"
                                    alt="debin"
                                />
                            </div>
                            <div class="agent-info">
                                <div class="server-tags">
                                    <span class="server-name">
                                        <i class="icon-desktop"></i>
                                        <span
                                            >bjstdmngbdr08.thoughtworks.com</span
                                        >
                                    </span>
                                    <span class="badges-status building"
                                        >building</span
                                    >
                                    <span class="server-ip">
                                        <i class="icon-info"></i>
                                        <span>192.168.1.80</span>
                                    </span>
                                    <span class="server-folder">
                                        <i class="icon-folder"></i>
                                        <span>/var/lib/cruise-agent</span>
                                    </span>
                                </div>
                                <div class="res-tags">
                                    <i class="icon-plus"></i>
                                    <span
                                        >Chrome <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Firefox <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Safari <i class="icon-trash"></i
                                    ></span>
                                    <span
                                        >Ubuntu <i class="icon-trash"></i
                                    ></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">© Copyright 2017 <b>Thought</b>works</div>
        </div>
    </body>
    <script>
        function showUserInfo(e) {
            let userInfoIcon = document.querySelector(".userInfo");
            let userInfoList = document.querySelector(".user-info-list");
            userInfoIcon.className =
                userInfoIcon.className == "userInfo icon-angle-up"
                    ? "userInfo icon-angle-down"
                    : "userInfo icon-angle-up";
            userInfoList.style.visibility =
                userInfoIcon.className == "userInfo icon-angle-up"
                    ? "visible"
                    : "hidden";
            e.stopPropagation();
        }

        
/*
*为兼容ie11
*以下代码经过babel转码
*查看代码请看
*  ./js/function-es6.js
*/
"use strict";

function deleteRes(dialogInfo) {
  var id = dialogInfo.id;
  var index = dialogInfo.index;
  var agents = JSON.parse(sessionStorage.getItem("agents")); // 根据索引删除数组中的元素

  agents[id].resources[index] = agents[id].resources[agents[id].resources.length - 1];
  agents[id].resources.length -= 1;
  updataData(agents);
}

function addRes(dialogInfo) {
  var id = dialogInfo.id;
  var inputValue = document.querySelector(".res".concat(id)).value;
  var res = inputValue.split(",").map(function (e) {
    // 清楚内容前后空格
    return e.trim();
  }).filter(function (e) {
    return e.length > 0;
  }); //过滤空字符串

  var agents = JSON.parse(sessionStorage.getItem("agents"));
  agents[id].resources = agents[id].resources.concat(res).filter(function (e, i, arr) {
    return arr.indexOf(e) == i;
  });
  updataData(agents);
}

function openDialog(dialogInfo) {
  var id = dialogInfo.id; // 展示弹出框

  var dialog = document.querySelector(".dialog".concat(id));
  var masklayer = document.querySelector(".mask".concat(id));
  dialog.style.visibility = "visible";
  masklayer.style.visibility = "visible"; // console.log("event", window.event);
}

function closeDialog(dialogInfo) {
  var id = dialogInfo.id;
  var dialog = document.querySelector(".dialog".concat(id));
  var masklayer = document.querySelector(".mask".concat(id));
  dialog.style.visibility = "hidden";
  masklayer.style.visibility = "hidden"; // 清除输入框内容

  document.querySelector(".res".concat(id)).value = "";
}

var getTaskDetailByData = function getTaskDetailByData(serverItem, index) {
  var resourcesString = "";
  serverItem.resources.map(function (e, i) {
    resourcesString += "<span>".concat(e, " <i class=\"icon-trash\" onclick=\"deleteRes({id: ").concat(index, ", index: ").concat(i, " })\"></i></span>");
  });

  if (serverItem.status == "building") {
    resourcesString += "<div class=\"build-deny\">\n            <i class=\"icon-deny\"></i>\n            <label class=\"text-deny\">Deny</label>\n        </div>";
  }

  resourcesString += "\n        <div class=\"dialog dialog".concat(index, "\">\n            <i class=\"icon-close\" onclick=\"closeDialog({id:").concat(index, "})\"></i>\n            <div class=\"dialog-title\">Separate multiply resource name with commas</div>\n            <input type=\"text\" placeholder=\"  Input value\" class=\"res-input res").concat(index, "\">\n            <div class=\"btn-group\">\n                <span class=\"btn-add\" onclick=\"addRes({id:").concat(index, "})\">Add Resources</span>\n                <span class=\"btn-cancel\" onclick=\"closeDialog({id:").concat(index, "})\">Cancel</span>\n            </div>\n            <div class=\"triangle\"></div>\n        </div>\n        <div class=\"mask mask").concat(index, "\" onclick=\"closeDialog({id:").concat(index, "})\"></div>\n    ");
  return "<div class=\"task-detail\">\n    <div class=\"os-icon\">\n        <img\n            src=\"./ASSETS/os icons/".concat(serverItem.os || "windows", ".png\"\n            alt=\"").concat(serverItem.os || "windows", "\"\n        />\n    </div>\n    <div class=\"agent-info\">\n        <div class=\"server-tags\">\n            <span class=\"server-name\">\n                <i class=\"icon-desktop\"></i>\n                <span\n                    >").concat(serverItem.name, "</span\n                >\n            </span>\n            <span class=\"badges-status ").concat(serverItem.status, "\"\n                >").concat(serverItem.status, "</span\n            >\n            <span class=\"server-ip\">\n                <i class=\"icon-info\"></i>\n                <span>").concat(serverItem.ip, "</span>\n            </span>\n            <span class=\"server-folder\">\n                <i class=\"icon-folder\"></i>\n                <span>").concat(serverItem.location, "</span>\n            </span>\n        </div>\n        <div class=\"res-tags\">\n            <i class=\"icon-plus\" onclick=\"openDialog({id: ").concat(index, "})\"></i>\n            ").concat(resourcesString, "\n        </div>\n    </div>\n</div>");
};

var getCardInfoByData = function getCardInfoByData(server) {
  console.log("server", server);
  var stringTampleat = "<div class=\"card-info\">\n        <div class=\"building\">\n            <div class=\"status\">building</div>\n            <div class=\"number\">3</div>\n            <i class=\"icon-cog\"></i>\n        </div>\n        <div class=\"idle\">\n            <div class=\"status\">idle</div>\n            <div class=\"number\">5</div>\n            <i class=\"icon-coffee\"></i>\n        </div>\n        <div class=\"summary\">\n            <ul>\n                <li>\n                    <div>All</div>\n                    <span>8</span>\n                </li>\n                <li>\n                    <div>PHYSICAL</div>\n                    <span>4</span>\n                </li>\n                <li>\n                    <div>VIRTUAL</div>\n                    <span>4</span>\n                </li>\n            </ul>\n        </div>\n    </div>\n    <div class=\"filter-tools\">\n        <span class=\"type-button actived\">All</span>\n        <span class=\"type-button\">Physical</span>\n        <span class=\"type-button\">Virtual</span>\n        <div class=\"search-tools\">\n            <i class=\"icon-search\"></i>\n            <input type=\"text\" class=\"search-input\" />\n        </div>\n        <i class=\"icon-th-card\"></i>\n        <i class=\"icon-th-list activedIcon\"></i>\n    </div>";
  return stringTampleat;
};

var cachesData;

try {
  cachesData = sessionStorage.getItem("agents") && JSON.parse(sessionStorage.getItem("agents"));
} catch (e) {
  console.log("e", e);
  cachesData = null;
}

var data = cachesData || [{
  name: "bjstdmngbdr08.thoughtworks.com",
  os: "windows",
  status: "building",
  type: "virtual",
  ip: "192.168.1.80",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari", "Ubuntu", "Chrome"],
  id: 1
}, {
  name: "bjstdmngbdr08.thoughtworks.com",
  os: "windows",
  status: "building",
  type: "virtual",
  ip: "192.168.1.80",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari", "Ubuntu", "Chrome"],
  id: 2
}, {
  name: "bjstdmngbdr10.thoughtworks.com",
  os: "ubuntu",
  status: "building",
  type: "physical",
  ip: "192.168.1.117",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari"],
  id: 3
}, {
  name: "bjstdmngbdr11.thoughtworks.com",
  os: "debian",
  status: "building",
  type: "virtual",
  ip: "192.168.1.102",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari", "Ubuntu", "Chrome"],
  id: 4
}, {
  name: "bjstdmngbdr15.thoughtworks.com",
  os: "suse",
  status: "idle",
  type: "physical",
  ip: "192.168.1.110",
  location: "/var/lib/cruise-agent",
  resources: [],
  id: 5
}, {
  name: "bjstdmngbdr02.thoughtworks.com",
  os: "centos",
  status: "idle",
  type: "virtual",
  ip: "192.168.1.103",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari", "Ubuntu", "Chrome"],
  id: 6
}, {
  name: "bjstdmngbdr04.thoughtworks.com",
  os: "suse",
  status: "idle",
  type: "physical",
  ip: "192.168.1.113",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari", "Ubuntu", "Chrome"],
  id: 7
}, {
  name: "bjstdmngbdr22.thoughtworks.com",
  os: "centos",
  status: "idle",
  type: "virtual",
  ip: "192.168.1.111",
  location: "/var/lib/cruise-agent",
  resources: ["Ubuntu", "Chrome"],
  id: 8
}, {
  name: "bjstdmngbdr08.thoughtworks.com",
  os: "windows",
  status: "building",
  type: "virtual",
  ip: "192.168.1.80",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari", "Ubuntu", "Chrome"],
  id: 10
}, {
  name: "bjstdmngbdr08.thoughtworks.com",
  os: "windows",
  status: "building",
  type: "virtual",
  ip: "192.168.1.80",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari", "Ubuntu", "Chrome"],
  id: 11
}, {
  name: "bjstdmngbdr08.thoughtworks.com",
  os: "windows",
  status: "building",
  type: "virtual",
  ip: "192.168.1.80",
  location: "/var/lib/cruise-agent",
  resources: ["Firefox", "Safari", "Ubuntu", "Chrome"],
  id: 12
}];

function updataData(agents) {
  var panelContentInnerHtml = "";
  panelContentInnerHtml += getCardInfoByData(agents);
  agents.map(function (agent, index) {
    panelContentInnerHtml += getTaskDetailByData(agent, index);
  });
  var panelContent = document.querySelector(".panel-content");
  panelContent.innerHTML = panelContentInnerHtml;
  sessionStorage.setItem("agents", JSON.stringify(agents));
}

updataData(data);
    </script>
</html>
